<script lang="ts">
import androidInstallPng from '~/pages/install-app/imgs/android-1.png';
import iosInstallPng from '~/pages/install-app/imgs/ios-3.png';
import InstallSvg from '../pic/install.svg';

export const installProcessPopup = useAntdModal(

  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('./installProcessPopup.vue')),
  {
    title: toRef(() => 'How to install'),
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-install-app-Android __screen-drawer',
    centered: true,
    footer: null,
  },
);
</script>

<script setup lang="ts">
const props = defineProps<{}>();
</script>

<template>
  <div class="text-sm">
    <div class="grid gap-7.5 text-center text-4 text-[#9F9F9F]">
      <div class="flex flex-col gap-4">
        <div class="flex-center gap-2 text-sys-text-head">
          <p class="font-500">
            Google Chrome
          </p>
          <div class="flex-center gap-2 text-[#00CB64]">
            <span class="text-4 font-500">Android</span>
            <i class="i-basil:android-solid text-5" />
          </div>
        </div>
        <img :src="androidInstallPng" class="mx-auto mt-2.5 w-85">

        <div class="flex items-center gap-2 text-left">
          <i class="i-ri:more-2-fill block text-5" /> {{ $t('d899lkkkuaskdZ4BaNspC') }}
        </div>
        <div class="flex gap-2 text-left">
          <img :src="InstallSvg" alt="" srcset=""> {{ $t('xnvv3HIdi5pPNh75tyruI') }}
        </div>
      </div>

      <div class="flex flex-col gap-4">
        <div class="flex-center gap-2 text-sys-text-head">
          <p class="font-500">
            Google Chrome
          </p>
          <div class="flex-center gap-2 text-[#00CB64]">
            <span class="text-4 font-500">ios</span>
            <i class="i-ri:apple-fill text-5" />
          </div>
        </div>
        <img :src="androidInstallPng" class="mx-auto mt-2.5 w-85">

        <div class="flex items-center gap-2 text-left">
          <i class="i-iconoir:cloud-upload block text-5" /> {{ $t('d899lkkkuaskdZ4BaNspC') }}
        </div>
        <div class="flex gap-2 text-left">
          <i class="i-material-symbols:add-box-outline block text-5" /> {{ $t('xnvv3HIdi5pPNh75tyruI') }}
        </div>
      </div>

      <div class="grid gap-4">
        <div class="text-sys-text-head">
          <p class="font-500">
            Safari Browser
          </p>
          <img :src="iosInstallPng" class="mt-5 h-27.5">
        </div>

        <div class="flex gap-2 text-left">
          <i class="i-iconoir:cloud-upload block text-5" /> {{ $t('uW3KxrYiMxIvdHDPjj8') }}
        </div>
        <div class="flex gap-2 text-left">
          <i class="i-material-symbols:add-box-outline block text-5" />{{ $t('raMpZmaHj1TjeUKoSc1Au') }}
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:global(.ant-modal-wrap.ant-cover__Modal-drawer:not([class*='ant-modal-confirm']) .ant-modal-content) {
  background: #0f0f0f;
}
</style>
